<template>
    <!-- <div>

    <input v-autofocus type="text" />

  </div> -->
    <!-- <Counter></Counter>
  <hr>
  <ProvideInjectParent></ProvideInjectParent>
  <hr>
  <Parent></Parent>

  <DirectiveVisible></DirectiveVisible>
  <SlotDemo>
    slot default content
    <template #header>
      slot header content
    </template>
<template #footer="{ data }">
      slot footer content
      {{ data }}
    </template>
</SlotDemo>

<CacheEvent></CacheEvent>
<ContextParent></ContextParent>
<Scope></Scope>
<hr>
<div>Sync 修饰符 count in parent: {{ count }}</div>
<SyncComponent v-model:count="count"></SyncComponent>
<hr>
<div>Props修改 count in parent: {{ countProp }}</div>
<PropsComponent ref="propRefEle" :count="countProp" @count-change="onCountChange"></PropsComponent>
<div><el-button type="primary" @click="getRefElement">Get Element</el-button></div>

<hr> -->

    <!-- <ModelComp :person="person">
        <template #default> slot in parent: {{ person }}</template>
    </ModelComp> -->
    <!-- 
    <ModelComp2 v-model="anotherPerson">
        <template #default> slot in parent: {{ anotherPerson }}</template>
    </ModelComp2> -->
    <!-- <div> {{ firstName }} - {{ lastName }} - {{ model }} in parent</div> -->

    <!-- <hr>

  <div>
    <el-button type="primary" @click="showDialog"> Click to show dialog</el-button>
  </div> -->

    <!-- <hr /> -->

    <!-- <SassMath></SassMath> -->
    <!-- 
  <hr>
  <MediaSimple></MediaSimple>
  <hr>
  <el-button type="primary" @click="changeSetupVisivle"> Click to show dialog</el-button>

  <Setup v-if="showSetup"></Setup> -->
    <!-- <HooksComponent></HooksComponent> -->
    <!-- <Counter></Counter> -->
    <div
        style="
            display: flex;
            justify-content: center;
            justify-content: baseline;
        "
    >
        <div style="margin: 10px" v-for="item in items" :key="item.href">
            <a :href="item.href">{{ item.title }}</a>
        </div>
    </div>
    <router-view></router-view>
</template>

<script setup lang="ts">
const items = [
    {
        href: '/',
        title: 'Home'
    },
    {
        href: '/media',
        title: 'Media'
    }
]
// import Counter from './components/counter/Counter.vue'
import ProvideInjectParent from './components/provider-inject/ProvideInjectParent.vue'
import Parent from './components/sibling/Parent.vue'
import DirectiveVisible from './components/DirectiveVisible.vue'
import SlotDemo from './components/SlotDemo.vue'
// import CacheEvent from './components/CacheEvent.vue'
import ContextParent from './components/use-context/Context-Parent.vue'
import Scope from './components/Scope.vue'
import SyncComponent from './components/SyncComponent.vue'
import PropsComponent from './components/PropsComponent.vue'
import ModelComp from './components/ModelComp.vue'
import ModelComp2 from './components/ModelComp2.vue'
import MediaSimple from './components/MediaSimple.vue'
import Setup from './components/Setup.vue'
import HooksComponent from './components/HooksComponent.vue'
import { computed, ref } from 'vue'
import showMessageUtil from './utils/show-message.util'

import SassMath from './components/SassMath.vue'

const data = ref([1, 2, 3, 4, 5])

const person = ref({ name: 'su', company: 'dalian', addr: 'china' })
const anotherPerson = ref({ name: 'Dan', company: 'Ac', addr: 'US' })

const propRefEle = ref(null)

const firstName = ref('su')
const lastName = ref('leslie')
const model = ref('moon')

const count = ref(1)
const countProp = ref(1)
const showSetup = ref(true)

const showDialog = () => {
    const close = showMessageUtil('Hello')
    setTimeout(() => {
        close()
    }, 2000)
}

const changeSetupVisivle = () => {
    showSetup.value = !showSetup.value
}

const getRefElement = () => {
    console.info('propRef', propRefEle)
    console.info('propRef', propRefEle.value)
}

const onCountChange = (val: number) => {
    countProp.value = val
}
</script>

<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
